<template>
  <div class="discover-page">
    <!-- 轮播广告区域 -->
    <div class="banner-section">
      <el-carousel
          v-if="bannerList.length > 0"
          :interval="4000"
          height="300px"
          indicator-position="outside"
          arrow="always"
      >
        <el-carousel-item v-for="banner in bannerList" :key="banner.bannerId">
          <div class="banner-item" @click="handleBannerClick(banner)">
            <el-image
                :src="banner.imageUrl"
                :alt="banner.title"
                fit="cover"
                class="banner-image"
            >
              <template #error>
                <div class="banner-placeholder">
                  <el-icon><Picture /></el-icon>
                  <span>{{ banner.title }}</span>
                </div>
              </template>
            </el-image>
            <div class="banner-title">{{ banner.title }}</div>
          </div>
        </el-carousel-item>
      </el-carousel>

      <!-- 空状态 -->
      <div v-else class="empty-banner">
        <el-empty description="暂无广告" :image-size="100" />
      </div>
    </div>

    <!-- 选择栏区域 -->
    <div class="tab-section">
      <div class="tab-container">
        <div
            class="tab-item"
            :class="{ active: activeTab === 'information' }"
            @click="switchTab('information')"
        >
          资讯
        </div>
        <div class="tab-divider">|</div>
        <div
            class="tab-item"
            :class="{ active: activeTab === 'notice' }"
            @click="switchTab('notice')"
        >
          公告
        </div>
      </div>
    </div>

    <!-- 热门资讯区域 -->
    <div class="hot-information-section">
      <div class="section-header">
        <h2 class="section-title">热门资讯</h2>
      </div>

      <!-- 加载状态 -->
      <div v-if="loading" class="loading-state">
        <div class="loading-skeleton" v-for="n in 4" :key="n">
          <el-skeleton :rows="1" animated />
        </div>
      </div>

      <!-- 空状态 -->
      <div v-else-if="hotInformationList.length === 0" class="empty-state">
        <el-empty description="暂无热门资讯" :image-size="150" />
      </div>

      <!-- 热门资讯列表 -->
      <div v-else class="hot-list">
        <div
            v-for="item in hotInformationList"
            :key="item.articleId"
            class="hot-item"
            @click="viewInformationDetail(item.articleId)"
        >
          <div class="item-image">
            <el-image
                :src="item.coverImage || './placeholder/120/80'"
                :alt="item.title"
                fit="cover"
                class="cover-image"
            >
              <template #error>
                <div class="image-placeholder">
                  <el-icon><Picture /></el-icon>
                </div>
              </template>
            </el-image>
          </div>

          <div class="item-content">
            <h3 class="item-title">{{ item.title }}</h3>
            <div class="item-meta">
              <span class="author">{{ item.author || '未知作者' }}</span>
              <span class="time">{{ formatTime(item.publishTime) }}</span>
            </div>
            <div class="item-stats">
              <div class="stat">
                <el-icon><ChatDotRound /></el-icon>
                <span>{{ item.commentNum || 0 }}</span>
              </div>
              <div class="stat">
                <el-icon><Star /></el-icon>
                <span>{{ item.likeNum || 0 }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import {
  Picture,
  ChatDotRound,
  Star
} from '@element-plus/icons-vue'
import { listUserBanner } from "@/api/discover"
import { listHotInformation } from "@/api/discover"

const router = useRouter()

// 响应式数据
const activeTab = ref('information')
const bannerList = ref([])
const hotInformationList = ref([])
const loading = ref(false)

// 切换标签
const switchTab = (tab) => {
  activeTab.value = tab
  // 这里可以添加跳转逻辑，根据您的路由配置
  if (tab === 'information') {
    // 跳转到资讯页面
    router.push('information')
  } else if (tab === 'notice') {
    // 跳转到公告页面
    router.push('noticeClient')
  }
}

// 处理广告点击
const handleBannerClick = (banner) => {
  if (banner.linkUrl) {
    window.open(banner.linkUrl, '_blank')
  }
}

// 查看资讯详情
const viewInformationDetail = (articleId) => {
  // 根据您的路由配置跳转到资讯详情页
  router.push(`/userIndex/information/detail/${articleId}`)
}

// 格式化时间
const formatTime = (time) => {
  if (!time) return ''
  try {
    const date = new Date(time)
    const now = new Date()
    const diff = now - date

    // 1天内显示相对时间
    if (diff < 86400000) {
      if (diff < 3600000) {
        return `${Math.floor(diff / 60000)}分钟前`
      }
      return `${Math.floor(diff / 3600000)}小时前`
    }
    // 其他情况显示日期
    return date.toLocaleDateString('zh-CN', {
      month: '2-digit',
      day: '2-digit'
    })
  } catch {
    return ''
  }
}

// 获取广告列表
const getBannerList = async () => {
  try {
    const response = await listUserBanner()
    bannerList.value = response.data || []
  } catch (error) {
    console.error('获取广告列表失败:', error)
    bannerList.value = []
  }
}

// 获取热门资讯列表
const getHotInformationList = () => {
  loading.value = true
  listHotInformation({
    pageNum: 1,
    pageSize: 8
  }).then(response => {
    hotInformationList.value = response.rows || []
    loading.value = false
  }).catch(error => {
    console.error('获取热门资讯列表失败:', error)
    hotInformationList.value = []
    loading.value = false
  })
}

// 初始化
onMounted(() => {
  getBannerList()
  getHotInformationList()
})
</script>

<style scoped>
.discover-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  padding: 20px;
}

/* 轮播广告样式 */
.banner-section {
  margin-bottom: 30px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.banner-item {
  position: relative;
  height: 300px;
  cursor: pointer;
}

.banner-image {
  width: 100%;
  height: 100%;
}

.banner-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: white;
  padding: 20px;
  font-size: 1.3rem;
  font-weight: 600;
}

.banner-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  color: #c0c4cc;
}

.banner-placeholder .el-icon {
  font-size: 3rem;
  margin-bottom: 12px;
}

.empty-banner {
  background: white;
  border-radius: 16px;
  padding: 40px 20px;
  text-align: center;
}

/* 选择栏样式 */
.tab-section {
  margin-bottom: 30px;
}

.tab-container {
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  max-width: 300px;
  margin: 0 auto;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 12px 20px;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s ease;
  font-weight: 500;
  color: #666;
}

.tab-item:hover {
  background: #f8f9fa;
  color: #409eff;
}

.tab-item.active {
  background: #409eff;
  color: white;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
}

.tab-divider {
  color: #e8e8e8;
  padding: 0 8px;
  font-weight: 300;
}

/* 热门资讯区域 */
.hot-information-section {
  background: white;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.section-header {
  text-align: center;
  margin-bottom: 30px;
}

.section-title {
  font-size: 1.8rem;
  color: #2c3e50;
  margin-bottom: 8px;
  font-weight: 700;
}

.section-subtitle {
  color: #7f8c8d;
  font-size: 1rem;
}

.loading-state {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.loading-skeleton {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 12px;
}

.empty-state {
  padding: 40px 20px;
  text-align: center;
}

.hot-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

.hot-item {
  display: flex;
  gap: 16px;
  padding: 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #f0f0f0;
}

.hot-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  border-color: #409eff;
}

.item-image {
  flex-shrink: 0;
  width: 120px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
}

.cover-image {
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
}

.hot-item:hover .cover-image {
  transform: scale(1.05);
}

.image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  color: #c0c4cc;
}

.item-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.item-title {
  font-size: 1rem;
  color: #2c3e50;
  margin: 0 0 8px 0;
  line-height: 1.4;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.item-meta {
  display: flex;
  gap: 12px;
  font-size: 0.85rem;
  color: #7f8c8d;
  margin-bottom: 8px;
}

.item-stats {
  display: flex;
  gap: 16px;
}

.stat {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #7f8c8d;
  font-size: 0.85rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .discover-page {
    padding: 12px;
  }

  .banner-section {
    margin-bottom: 20px;
  }

  .banner-item {
    height: 200px;
  }

  .banner-title {
    padding: 12px;
    font-size: 1.1rem;
  }

  .hot-information-section {
    padding: 20px;
  }

  .section-title {
    font-size: 1.5rem;
  }

  .hot-list {
    grid-template-columns: 1fr;
  }

  .hot-item {
    padding: 12px;
  }

  .item-image {
    width: 100px;
    height: 70px;
  }
}

@media (max-width: 480px) {
  .tab-container {
    max-width: 100%;
  }

  .tab-item {
    padding: 10px 16px;
    font-size: 0.9rem;
  }

  .hot-item {
    flex-direction: column;
  }

  .item-image {
    width: 100%;
    height: 120px;
    margin-bottom: 12px;
  }
}
</style>